<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>6移动端的事件对象</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<style type="text/css">
			body {
				margin: 0px;
			}

			#div1 {
				width: 800px;
				height: 300px;
				background-color: orange;
				position: absolute;
				top: 0px;
				left: 0px;
				font-size: 20px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="" id="div1">

		</div>
		<script type="text/javascript">
			/*
			当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象
			事件对象：
			当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息。
			
			touches 当前位于屏幕上的所有手指的一个列表
			target Touches位于当前DOM元素上的手指的一 个列表
			changedTouches 涉及当前事件的手指的一个列表
			
			*/
			document.addEventListener("touchstart", function(ev) {
				if(ev.preventDefault){
					ev.preventDefault();//测试报错
				}
				
			});
			var div = document.getElementById('div1');
			div.addEventListener('touchstart', Start);

			function Start(ev) {
				console.log(ev.touches.length)
				this.innerHTML = ev.touches.length;
			}
		</script>
	</body>
</html>
